<script setup lang="ts">
import LEchart from '@/pagesReport/lime-echart/components/l-echart/l-echart.vue'
import { onMounted, ref, watch } from 'vue'
import * as echarts from 'echarts'
import { useReportStore } from '@/stores'
const dashBoard = ref()
const reportStore = useReportStore()
const score = ref(0)
const dashBoardoption = ref({
  series: [
    {
      type: 'gauge',
      center: ['50%', '60%'],
      startAngle: 225,
      endAngle: -45,
      min: 0,
      max: 100,
      splitNumber: 10,
      itemStyle: {
        borderCaop: 'round',
      },
      //进度条
      progress: {
        show: true,
        width: 20,
        itemStyle: {
          color: '#5bd2fd',
        },
      },
      pointer: {
        show: false,
      },
      //底部条
      axisLine: {
        lineStyle: {
          width: 20,
          roundCap: true,
        },
      },
      //轴线
      axisTick: {
        //距离圆心的距离
        distance: -30,
        splitNumber: 10,
        lineStyle: {
          width: 1,
          color: '#5bd2fd',
        },
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      anchor: {
        show: false,
      },
      title: {
        show: false,
      },
      radius: '100%',
      detail: {
        valueAnimation: true,
        width: '60%',
        lineHeight: 25,
        borderRadius: 8,
        offsetCenter: [0, '10%'],
        fontSize: 18,
        fontWeight: 'bolder',
        formatter: '睡眠平衡指数\n{value}',
        color: '#313131',
      },
      data: [
        {
          value: score.value,
        },
      ],
    },
  ],
})
onMounted(async () => {
  if (!reportStore.report) return
  score.value = reportStore.report.monitorInfo.slpQua as number
  dashBoardoption.value.series[0].data[0].value = score.value
  const dashBoardchart = await dashBoard.value.init(echarts)
  dashBoardchart.setOption(dashBoardoption.value)
})
watch(
  () => reportStore.report,
  async (newReport) => {
    if (newReport) {
      score.value = newReport.monitorInfo.slpQua as number
      console.log(score.value, '睡眠平衡指数')
      dashBoardoption.value.series[0].data[0].value = score.value
      const dashBoardchart = await dashBoard.value.init(echarts)
      dashBoardchart.setOption(dashBoardoption.value)
    }
  },
)
</script>
<template>
  <view class="dashbord">
    <l-echart ref="dashBoard"></l-echart>
  </view>
</template>
